console.log(moduleName);

declare interface Window {
  [key: string]: any
}

window[moduleName]['func'] = {
  run() {
    const config = JSON.parse(document.querySelector(`#${moduleName}_config`)?.innerHTML || '{}')
    const selector = `#${moduleName} .mySwiper`
    const newTemplate = $(selector).clone()
    $(selector).replaceWith(newTemplate)
    this.start(config.slidesPerView, config.rate, config.initialRate, config.distance, config.scale)
  },

  start(slidesPerView: number, rate: number, initialRate: number, distance: number, scale: number) {
    const len = document.querySelectorAll(`#${moduleName} .swiper-wrapper .swiper-slide`).length
    const side = (len - 1) / 2
    const offset = Math.floor(slidesPerView / 2)
    let table: {
      deg: number,
      dis: number,
      scale: number,
      index: number,
      opacity: number
    }[] = [];
    for (let i = side; i > 0; i--) {
      table.push({
        deg: initialRate + i * rate,
        dis: rate * rate * i * distance,
        scale: rate * scale * i + 1,
        index: len - i,
        opacity: i > offset ? 0 : (len - i) * 0.1,
      });
    }

    table.push({
      deg: 0,
      dis: 0,
      scale: 1 + scale * 4,
      index: 999,
      opacity: 1,
    });

    for (let i = 1; i <= side; i++) {
      table.push({
        deg: -initialRate + -i * rate,
        dis: rate * rate * -i * distance,
        scale: rate * scale * i + 1,
        index: len - i,
        opacity: i > offset ? 0 : (len - i) * 0.1,
      });
    }

    for (let i = side; i > offset; i--) table.push(table.shift() as any);

    const slideContents: HTMLElement[] = [];
    //@ts-ignore
    new Swiper(`#${moduleName} .mySwiper`, {
      allowTouchMove: false,
      slidesPerView,
      loop: true,
      navigation: {
        prevEl: ".swiper-button-prev",
        nextEl: ".swiper-button-next",
      },
      on: {
        init: function (swiper: any) {
          for (let i = 0; i < len; i++) {
            slideContents.push(swiper.slides[i].children[0]);
            const tableEl = table[i];
            const el = slideContents[i];
            el.setAttribute(
              "style",
              `transform: rotateY(${tableEl.deg}deg) translateX(${tableEl.dis}px) scale(${tableEl.scale}); z-index: ${tableEl.index}; opacity: ${tableEl.opacity}` //
            );
          }
        },
        slideNextTransitionStart: function () {
          let prev = slideContents[len - 1].getAttribute("style") || '';
          for (let i = 0; i < len; i++) {
            const cur = slideContents[i];
            const tmp = cur.getAttribute("style");
            cur.setAttribute("style", prev);
            prev = tmp || '';
          }
        },
        slidePrevTransitionStart: function () {
          const first = slideContents[0].getAttribute("style") || '';
          for (let i = 0; i < len - 1; i++) {
            const cur = slideContents[i];
            const next = slideContents[i + 1];
            cur.setAttribute("style", next.getAttribute("style") || '');
          }

          slideContents[len - 1].setAttribute("style", first);
        },
      },
    })
  }
}


// window[moduleName].init(5, 3, 40, 12, 0.02)
window.addEventListener("load", () => {
  window[moduleName]['func'].run()
})
